import { defineComponent, ref } from 'vue';
import {useWebPage} from "@/utils/hooks";


export default defineComponent({

    setup() {
        const data = ref([
            { id: 1, name: '项目1' },
            { id: 2, name: '项目2' },
            { id: 3, name: '项目3' },{ id: 1, name: '项目1' },
            { id: 2, name: '项目2' },
            { id: 3, name: '项目3' },{ id: 1, name: '项目1' },
            { id: 2, name: '项目2' },
            { id: 3, name: '项目3' },{ id: 1, name: '项目1' },
            { id: 2, name: '项目2' },
            { id: 3, name: '项目3' },
        ]);

        const pageConfig = useWebPage(10, data); // 每页显示10条数据

        const nextPage = () => {
            if (pageConfig.pageNum < Math.ceil(pageConfig.total / pageConfig.pageSize)) {
                pageConfig.pageNum++;
                pageConfig.turn();
            }
        };

        const prevPage = () => {
            if (pageConfig.pageNum > 1) {
                pageConfig.pageNum--;
                pageConfig.turn();
            }
        };
        return () => (
            <div>
                <ul>
                    {pageConfig.showData.map((item) => (
                        <li key={item.id}>{item.name}</li>
                    ))}
                </ul>
                <button onClick={prevPage}>上一页</button>
                <button onClick={nextPage}>下一页</button>
                <p>总条数: {pageConfig.total}</p>
                <p>当前页: {pageConfig.pageNum}</p>
            </div>
        );
    },
});
